<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>角色名:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <span>{{ roleName }}</span>
          </div>
        </el-col>
      </el-row>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>拥有权限:</span>
          </div>
        </el-col>
        <!--        <el-col>-->
        <!--          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选-->
        <!--          </el-checkbox>-->
        <!--          <div style="margin: 15px 0;"></div>-->
        <!--          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">-->
        <!--            <el-checkbox v-for="(city,index) in cities" :label="city.powerId" :key="index">{{ city.function }}-->
        <!--            </el-checkbox>-->
        <!--          </el-checkbox-group>-->
        <!--        </el-col>-->
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <span v-for="item in this.havenPower" style="margin-left: 5px">{{ item.function }}</span>
          </div>
        </el-col>
      </el-row>
      <p/>

      <p/>


      <el-button type="success" @click="add">返回</el-button>


    </el-card>

  </div>
</template>

<script>
export default {
  name: "findById",
  data() {
    return {
      roleName: '',

      havenPower: [],
    }
  },
  methods: {
    init(id) {
      let params = {
        roleId: id
      }
      this.$axios.get('drp/role/findById', {params: params}).then(
          r => {
            this.roleName = r.data.roleName
            this.havenPower = r.data.powerBeanList
          }
      )
    }, add() {
      location.href = "/index"
    }
  },

}
</script>

<style scoped>

</style>